<template>
  <div>
    <p class="title">热门推荐</p>
    <van-row gutter="6">
      <van-col span="8" v-for="item in recomendList" :key="item.id">
        <van-image width="100%" height="3rem" fit="cover" :src="item.picUrl" />
        <p class="song_name">
          {{ item.name }}
        </p>
      </van-col>
    </van-row>
    <p class="title">最新音乐</p>
    <Song-Item
      v-for="item in newMusicList"
      :key="item.id"
      :name="item.name"
      :artName="item.song.artists[0].name"
      :songId="item.id"
      :albUrl="item.picUrl"
    ></Song-Item>
  </div>
</template>

<script>
import { recommendMusic, latestMusic } from "@/server/api/HomeApi.js";
// 导入组件
import SongItem from "@/components/SongItem.vue";
export default {
  components: {
    SongItem,
  },
  data() {
    return {
      // 推荐歌单的列表
      recomendList: [],
      // 最新音乐列表
      newMusicList: [],
    };
  },
  methods: {},
  async created() {
    let res = await recommendMusic({ limit: 6 });
    this.recomendList = res.data.result ? res.data.result : [];

    // 查询最新音乐
    let newMusic = await latestMusic({ limit: 20 });
    this.newMusicList = newMusic.data.result ? newMusic.data.result : [];
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.title {
  padding: 0.266667rem 0.24rem;
  margin-bottom: 0.24rem;
  background-color: #eee;
  font-size: 15px;
  color: #333;
}
.song_name {
  font-size: 0.34667rem;
  padding: 0 0.08rem;
  margin-bottom: 0.266667rem;
  word-break: break-all;
  text-overflow: ellipsis;
  /* 对象作为伸缩盒子模型显示 */
  display: -webkit-box;
  /*设置伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 36px;
}
</style>
